<template>
	<view class="good-box" >
		<image :src="item.goods.thumbnail" class="good-img" mode="scaleToFill"></image>
		<view class="good-name block">{{item.goods.title}}</view>
		<view class="good-block">
			<view class="good-qune">{{item.back_independent === -1 ? '全网排队':'单店排队'}}</view>
			<view class="good-return">可免单¥{{isLeader ? (item.goods.share_price * item.back_self_ratio / 100 /100 ).toFixed(2) : (item.goods.sale_price * item.back_self_ratio / 100 /100 ).toFixed(2)}}</view>
		</view>
		<view class="good-foot">
			<view class="good-price">
				<template v-if="isLeader">
					¥{{(item.goods.share_price / 100).toFixed(2)}}
				</template>
				<template v-else>
					¥{{(item.goods.sale_price / 100).toFixed(2)}}
				</template>
			</view>
			<view v-if="item.goods.sold > 0" class="good-mount">
				销量{{item.goods.sold}}
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		item: {
			type: Object,
			default: null
		},
		url: {
			type: String,
			default: ''
		},
		isLeader: { // 是否为团长分享，可以享受团长分享价
			type: Boolean,
			default: false
		}
	})
</script>
<style scoped lang="scss">
	.good-box {
		width: 340rpx;
		height: 460rpx;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		.good-img {
			width: 100%;
			height: 260rpx;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			margin-bottom: 6rpx;
		}
		.block {
			width: 100%;
			padding: 0rpx 10rpx;
			box-sizing: border-box;
		}
		.good-name {
			height: 64rpx;
			color: #000;
			font-size: 24rpx;
			line-height: 32rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical 
		}
		.good-block {
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			margin-left: 10rpx;
		}
		.good-return {
			padding: 0 8rpx;
			box-sizing: border-box;
			background: rgba(252, 73, 81, 0.1);
			font-size: 24rpx;
			font-weight: normal;
			line-height: 36rpx;
			height: 36rpx;
			color: #FC4951;
			border-radius: 4rpx;
			margin-left: 10rpx;
		}
		.good-qune {
			padding: 0 8rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			line-height: 36rpx;
			height: 36rpx;
			color: #8D6412;
			font-weight: normal;
			background: rgba(219, 149, 11, 0.1);
		}
		.good-foot {
			width: 100%;
			height: 52rpx;
			margin-top: 6rpx;
			padding: 0rpx 10rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.good-price {
				color: #FC4951;
				font-size: 36rpx;
				font-weight: bold;
			}
			.good-mount {
				color: #969799;
				font-size: 24rpx;
				line-height: 32rpx;
			}
		}
	}
</style>